<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .main-box {
            height: 400px;
            width: 600px;
            border: 1px solid #ededed;
            padding: 30px;
            box-sizing: border-box;
            margin: 100px auto;
            position: relative;
        }

        .main-box>img {
            width: 100%;
            margin: auto;
            vertical-align: bottom;
        }

        .modal {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            z-index: 100;
            background: #000;
            opacity: 0.2;
        }
    </style>
</head>

<body>
    <div class="main-box" id="main_box">
        <div class="modal" id="modal"></div>
        <img src="images/7fd63efdcbbc9a91.jpg" alt="">
    </div>
    <script>
        /* 1.onmouseover 80% 每50毫秒增加2% 增加到80%的时候停止 */
        /* 2.onmouseout 每50毫秒减少2% 直到20%的时候停止 */
        var main_box = document.getElementById("main_box");
        var modal = document.getElementsByClassName("modal")[0];
        var opacity = getComputedStyle(modal).opacity * 100; //获取样式表中的样式 使用getComputedStyle(obj).attr
        var timer_in = null;
        var timer_out = null
        console.log(opacity);
        //    清理定时器要写在setInterval里面
        /*  main_box.onmouseover = function () {
             timer_in = setInterval(function () {
                 if (opacity < 80) {
                     opacity += 2;
                     console.log(opacity);
                     modal.style.opacity=opacity/100;
                 } else {
                     clearInterval(timer_in);
                 }
             }, 200)
         }
         main_box.onmouseout=function(){
             clearInterval(timer_in)
             timer_out=setInterval(function(){
                 if(opacity>20){
                     opacity -= 2;
                     console.log(opacity);
                     modal.style.opacity=opacity/100;
                 }else{
                     clearInterval(timer_out);
                 }
             },50)
         } */
        main_box.onmouseover = function () {
            clearInterval(timer_in);
            timer_in = setInterval(function () {
                if (opacity < 80) {
                    opacity += 2;
                    console.log(opacity);
                    modal.style.opacity = opacity / 100;
                } else {
                    clearInterval(timer_in);
                }
            }, 50)
        }
        main_box.onmouseout = function () {
            clearInterval(timer_in);
            timer_in = setInterval(function () {
                    if (opacity > 20) {
                        opacity -= 2;
                        console.log(opacity);
                        modal.style.opacity = opacity / 100;
                    } else {
                        clearInterval(timer_in);
                    }
            },50)
        }
    </script>
</body>

</html>